<!--
 * @Author: Bonnie
 * @Date: 2021-08-30 18:12:56
 * @LastEditTime: 2021-10-11 14:33:34
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /custom/src/views/Layout.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
// 使用流式布局
<template>
  <div>
    <template v-if="fluidList.length !=0">
      <FluidLayout :list="fluidList" />
    </template>
    <template v-else>not value</template>
  </div>
</template>

<script>
import FluidLayout from "@/components/FluidLayout.vue";

export default {
  name: "Layout",
  components: {
    FluidLayout
  },
  data() {
    return {
      fluidList: []
    };
  },
  beforeMount() {
    let list = [];
    for (let i = 0; i < 20; i++) {
      list.push({
        id: i,
        title: `${i}-`.repeat(5).slice(0, -1),
        src:
          "https://img.chinasongzhuang.cn/uploadimg/image/20200219/20200219180104_83804.jpg",
        num: i * 5,
        desc: `这是第个 ${i} 元素`
      });
    }
    this.fluidList = [...list];
  }
};
</script>
<style lang='scss' scoped>
</style>